<template>
  <div>
    <Button type="primary" class="back-button" @click="back()" icon="md-arrow-back">返回赛事列表</Button>
    <Card class="search-condition">
      <Row v-if="detail.eventsName" class="detail">
        <span>{{$config.userName(detail.eventsName,detail.eventsEnglishName)}}：</span>
        <Button @click="see" style="border: none;color: #359AFF;">查看基本信息</Button>
      </Row>
      <Row>
        <span>单场比赛名称：</span>
        <Input v-model="pageModel.fieldName" placeholder="请输入" clearable style="width: 150px" />
        <span>比赛进度：</span>
        <dict model="pageModel.gameState" :value="pageModel.gameState" @click="getVal" code="ZGX_BSZT"></dict>
        <span v-if="eventsId">成绩状态：</span>
        <dict v-if="eventsId" model="pageModel.scoreState" :value="pageModel.scoreState" @click="getVal" code="ZGX_CJZT"></dict>
        <span>比赛时间：</span>
        <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.fieldstartTime"></DatePicker>
        <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.fieldendTime"></DatePicker>
        <Button @click="fetchListStart" class="m-l-sm" type="primary" icon="md-search">筛选</Button>
        <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
      </Row>
    </Card>
    <Card class="m-t-sm" v-if='initLoading'>
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      </Row>
    </Card>
  </div>
</template>

<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import { getDict } from "@/api/configure";
import Api from "@/api/game";
import _ from "lodash";
const api = new Api();
// 赛事管理
export default {
  props: ["kindCode"],
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      initLoading: false,
      loading: true,
      saving: false,
      total: 0,
      visible: false,
      delModal: false,
      AGOUTS: [],
      AGINS: [],
      eventsId: this.$route.params.id,
      detail: {
        eventsId: null,
        eventsName: null,
        kindCode: null
      },
      // 发布 取消发布
      selectedTableItems: [],
      pageModel: {},
      model: {
        eventsId: null,
        fieldNumber: null,
        fieldName: null,
        fieldTime: null,
        address: null,
        fieldCourt: null,
        fieldAddressCountry: null,
        fieldAddressProvince: null,
        fieldAddressCity: null,
        fieldAddressCounty: null
      },
      page: {
        eventsId: this.$route.params.id,
        pageSize: this.$config.PAGE_SIZE,
        state: "0",
        pageNo: 1
      },
      // 表单验证
      ruleInline: {
        fieldNumber: [
          { required: true, message: "请输入" },
          {
            pattern: this.$config.numReg,
            message: "请输入数字"
          },
          {
            max: this.$config.INPUT_NUMBER_SIZE,
            message: `数字最长为${this.$config.INPUT_NUMBER_SIZE}位`,
            transform(value) {
              return value == null ? "" : value.toString();
            }
          }
        ],
        fieldName: [
          { required: true, message: "请输入" },
          {
            max: this.$config.INPUT_SIZE,
            message: `最多输入${this.$config.INPUT_SIZE}个字符`
          }
        ],
        fieldTime: [
          {
            required: true,
            type: "date",
            message: "请选择",
            trigger: "change"
          }
        ],
        // 国家
        fieldAddressCountry: [{ required: true, message: "请输入" }],
        // 省份
        fieldAddressProvince: [{ required: true, message: "请输入" }],
        // 地市
        fieldAddressCity: [{ required: true, message: "请输入" }],
        // 县区
        fieldAddressCounty: [{ required: true, message: "请输入" }],
        address: [{ required: true, message: "请输入" }],

        operatingCompany: [{ required: true, message: "请输入" }],
        fieldCourt: [
          { required: true, message: "请输入" },
          {
            max: this.$config.INPUT_SIZE,
            message: `最多输入${this.$config.INPUT_SIZE}个字符`
          }
        ]
      },
      tableColumns: [],
      tableColumnsTemp: [
        {
          title: "赛事名称",
          key: "eventsName",
          align: "left",
          render: (h, params) => {
            let self = this;
            let title = params.row.eventsName;
            return h(
              "a",
              {
                on: {
                  click: () => {
                    let self = this;
                    let kindNameUrl = self.$config.kindNameUrl(
                      params.row.kindCode
                    );
                    self.$router.push({
                      path:
                        "/game-score-management/" +
                        kindNameUrl +
                        params.row.eventsId
                    });
                  }
                },
                domProps: { title }
              },
              title
            );
          }
        },

        {
          title: "比赛阶段",
          key: "fieldNumber",
          width: 100,
          align: "left",
          render: (h, params) => {
            let self = this;
            return h(
              "span",
              self.$config.fieldNumberStr(params.row.fieldNumber)
            );
          }
        },
        {
          title: "单场比赛名称",
          key: "fieldName",
          align: "left",
          render: (h, params) => {
            let self = this;
            let title = self.$config.userName(
              params.row.fieldName,
              params.row.fieldEnglishName
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "比赛级别",
          key: "gradeCode",
          align: "left",
          width: 100,
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_BSJB",
                parentCode: this.detail.kindCode,
                value: params.row.gradeCode
              }
            });
          }
        },
        {
          title: "比赛日期",
          key: "fieldTime",
          align: "left",
          // ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.getDate(
              params.row.fieldTime,
              params.row.fieldEndTime
            );
            return h("span", { domProps: { title } }, title);
          }
        },

        {
          title: "比赛地点",
          key: "fieldAddressCountry",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.fieldAddress(
              params.row,
              self.AGOUTS,
              self.AGINS
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "比赛球场名称",
          key: "fieldCourt",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = params.row.fieldCourt;
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "比赛进度",
          key: "gameState",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              style: { color: "green" },
              props: { code: "ZGX_BSZT", value: params.row.gameState }
            });
          }
        },
        {
          title: "成绩状态",
          key: "scoreState",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              style: { color: "green" },
              props: { code: "ZGX_CJZT", value: params.row.scoreState }
            });
          }
        },
        {
          title: "录入时间",
          key: "writeTime",
          align: "left",
          render: (h, params) => {
            let self = this;
            return h("span", self.$config.getDate(params.row.writeTime));
          }
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "left",
          render: (h, params) => {
            let self = this;
            // gameState 比赛进度 state 是否发布
            if (params.row.gameState === "0" || params.row.state === "1") {
              return h("div");
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      let self = this;
                      self.$router.push({
                        path:
                          "/game-score-management/match-field/" +
                          params.row.fieldId
                      });
                    }
                  }
                },
                params.row.scoreState === "0" ? "录入" : "查看"
              )
            ]);
          }
        }
      ],
      tableData: []
    };
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, from) {
      let self = this;
      self.initLoading = false;
      self.eventsId = to.params.id;
      self.page.eventsId = to.params.id;
      self.init();
    },
    'detail': function(newVal) {
      if(newVal && newVal.kindCode == 20) {
        this.tableColumns = this.tableColumns.filter(
          x => x.key !== "gradeCode"
        );
      }
    }
  },
  methods: {
    back() {
      let path = "/game-score-management/";
      let { kindCode } = this.detail;
      switch (kindCode) {
        case "-1":
          path += "amateur";
          break;
        case "0":
          path += "teen";
          break;
        case "1":
          path += "career-man";
          break;
        case "2":
          path += "women/career-women";
          break;
        case "20":
          path += "women/women-two";
          break;
        case "3":
          path += "history/amateur/man";
          break;
        case "4":
          path += "history/amateur/women";
          break;
        case "5":
          path += "history/teen/man-a";
          break;
        case "6":
          path += "history/teen/women-a";
          break;
        case "7":
          path += "history/teen/man-b";
          break;
        case "8":
          path += "history/teen/women-b";
          break;
        default:
          path += "career-man";
          break;
      }
      this.$router.push({ path });
    },
    init() {
      let self = this;
      if (self.eventsId) {
        self.getGameById();
      }
      self.initLoading = true;
      Promise.all([getDict({ code: "AG_OUT" }), getDict({ code: "AG_IN" })])
        .then(data => {
          self.AGOUTS = data[0];
          self.AGINS = data[1];
          self.reset();
        })
        .catch(err => {
          self.reset();
        });
    },
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    // 获取数据
    fetchListStart() {
      let self = this;
      self.page = { ...self.page, ...self.pageModel, pageNo: 1 };
      self.fetchList();
    },
    fetchList() {
      this.loading = true;
      let promise = null;
      if (this.eventsId) {
        promise = api.querymatchList(this.page);
      } else {
        promise = api.listScorePage(_.omit(this.page, "state"));
      }
      promise
        .then(data => {
          this.loading = false;
          this.tableData = data.list || [];
          this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    // 重置
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      if (self.eventsId) {
        self.tableColumns = self.tableColumnsTemp.filter(
          x => !["eventsName"].includes(x.key)
        );
      } else {
        self.tableColumns = self.tableColumnsTemp.filter(
          x => !["fieldNumber", "writeTime"].includes(x.key)
        );
      }
      this.fetchListStart();
    },
    // 获取赛事详情
    getGameById() {
      let self = this;
      api.getGameById(self.eventsId).then(data => {
        self.detail = {
          eventsId: data.eventsId,
          eventsName: data.eventsName,
          eventsEnglishName: data.eventsEnglishName,
          kindCode: data.kindCode
        };
      });
    },
    see() {
      this.$router.push({
        path:
          "/game-management/edit" +
          "/" +
          this.detail.kindCode +
          "/" +
          this.detail.eventsId
      });
       if(['0', '-1'].includes(this.detail.kindCode)) {
         this.$router.push({
        path:
          "/game-management/edit-other" +
          "/" +
          this.detail.kindCode +
          "/" +
          this.detail.eventsId
      });
      }
    }
  }
};
</script>

<style scoped>
.ivu-btn-primary {
  margin: 0 4px;
}
.ivu-card-bordered {
  border: 1px solid #fff;
}
.ivu-card:hover {
  box-shadow: none;
}
.demo-spin-col {
  border: none;
}
.ivu-input-number {
  width: 100%;
}

.detail .ivu-btn:focus {
  box-shadow: none;
}
</style>
